import { InputNumber, Radio,Checkbox,Space } from "antd";
import { resourcePath } from "../../../../../../../utils/resource";
import {useState,useEffect} from 'react';
import './index.less'
import FhmbDetail from "./FhmbDetail";
import Yujinmsg from '../../Yujinmsg'
export default function Fhmb(props){
    const [total,setTotal]=useState();
    const [radius, setRadius] = useState();
    const [hpDetail,setHpDetail]=useState(false);

    const onChange=(e)=>{
        console.log(`checked=${e.target.checked}`);
        setHpDetail(!hpDetail);
    }
    return <>
     <div style={{
            width: 350,
            position: "absolute",
            left: 90,
            top: 80,
            bottom: 100,
            background: 'rgba(1,15,31,0.5)',
            overflow: "auto",
            borderRadius: 8,
        }} className="layout-v">
            <div style={{
                fontSize: 20,
                fontWeight: "bold",
                marginBottom: 12
            }} className='layout-h center'>
                <div className='fill w0'>
                    <div style={{
                        background: `url(${resourcePath.blockTitleBg})`,
                        height: 36,
                        backgroundSize: '100% 100%',
                        fontSize: 18,
                        lineHeight: '36px',
                        paddingLeft: 12,
                        fontWeight: "bold",
                        overflow: "hidden"
                    }}>
                       防护目标
                    </div>
                </div>
            </div>
            <div className='fill h0 layout-v' style={{
                        padding: 12
                    }}>
                        <Space>
                            <Radio.Group size='small' value={radius} onChange={
                                e=>{
                                    setRadius(e.target.value)
                                }
                            }>
                                <Radio.Button value={10}>10km</Radio.Button>
                                <Radio.Button value={20}>20km</Radio.Button>
                                <Radio.Button value={50}>50km</Radio.Button>
                            </Radio.Group>
                            <InputNumber size="small" placeholder="自动输入" addonAfter={"km"} style={{
                                width:120
                            }}/>
                        </Space>
                    </div>
        <div className='check' style={{
            marginBottom:550,
            padding:12
        }}>
            <Checkbox className='kinds' onChange={onChange}>滑坡{1}</Checkbox><br />
            <Checkbox className='kinds' onChange={onChange}>泥石流{4}</Checkbox><br />
            <Checkbox className='kinds' onChange={onChange}>崩塌{6}</Checkbox><br />

        </div>

     </div>
     {hpDetail && <FhmbDetail />}
    
    </>
}